<template>
  <!-- 左侧-侧边栏 -->
  <a-layout-sider :collapsed="collapsed" :trigger="null" collapsible>
    <div class="side-header">
      <!-- 图片 -->
      <img
        src="http://wuyao.ink/static/upload/2022-4-2-15-31-31-163-e9b4e.jpg"
        class="logo"
        alt=""
      />
      <!-- 标题 -->
      <h3 class="title" v-if="!collapsed">人事管理系统</h3>
    </div>

    <!-- 菜单 -->
    <a-menu
      :selectedKeys="currentRoute"
      theme="dark"
      mode="inline"
      @click="handleClickItem"
      v-for="item in routeList"
    >
      <a-menu-item :key="item.route">
        <BaseIcon :type="item.icon" />
        <!-- <UserOutlined /> -->
        <span>{{ item.routeName }}</span>
      </a-menu-item>
    </a-menu>
  </a-layout-sider>
</template>

<script setup lang="ts">
import {
  UserOutlined,
  VideoCameraOutlined,
  UploadOutlined
} from "@ant-design/icons-vue";
import { ref, onMounted, toRaw, watch, reactive, toRef } from "vue";
import { useRouter } from "vue-router";
import BaseIcon from "@/components/base-icon/index.vue";
const router = useRouter();
// 定义参数接口
interface Props {
  // 选中的菜单子项key值
  selectedKeys: string[];
  // 菜单是否折叠
  collapsed: boolean;
  // 路由列表
  routeList: [];
}
const props = defineProps<Props>();
const firstRoute = props.routeList[0].route;
let currentRoute = ref([]);

watch(
  () => router.currentRoute.value.path,
  (newValue, oldValue) => {
    // 判断当前的路由数组是否有值，有值则更新第一项的值，没有则push新值到第一项
    toRaw(currentRoute.value).length !== 0
      ? (currentRoute.value[0] = newValue)
      : currentRoute.value.push(newValue);
  },
  { immediate: true, deep: true }
);

/**
 * 处理点击菜单子项
 */
const handleClickItem = ({ key }) => {
  currentRoute.value[0] = key;
  router.push({ path: key });
};
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
